<template>
  <!-- 显示数据表 -->
  <!-- 变量:Monitors  事件:handleSelectionChange updateRow deleteRow -->
  <div class="affix-container" align="right">
    <el-affix target=".table-box" :offset="80">
      <el-tag type="danger">阈值 {{ threshold }}</el-tag>
    </el-affix>
  </div>
  <div class="table-box">
    <el-table ref="multipleTable" align="left" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="TABLESPACE_NAME">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column align="left" label="系统" prop="SYSTEM" width="120" />
      <el-table-column align="left" label="表空间" prop="TABLESPACE_NAME" width="120" />
      <el-table-column align="right" label="可用容量" prop="MAXBYTES" width="120" />
      <el-table-column align="right" label="已用容量" prop="USEDBYTES" width="120" />
      <el-table-column align="center" label="已用百分比" prop="TSUSEDPCT" width="120">
        <template #default="scope">
          <el-button v-if="scope.row.TSUSEDPCT > threshold" type="warning" size="small">{{ scope.row.TSUSEDPCT }}</el-button>
          <el-button v-else type="info" size="small">
            {{ scope.row.TSUSEDPCT }}
          </el-button>
        </template>
      </el-table-column>
      <!-- 没有下面这列设置,会造成内容不对齐 -->
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue'
import { IMonitor } from './api'
import { getMonitorList, getThreshold } from './api'

// 数据表
const tableData = ref([{} as IMonitor]) // 查询返回的数据
const multipleTable = ref([{} as IMonitor])
const threshold = ref(60) // 阈值

// 查询数据
const getData = async () => {
  await getMonitorList().then(resp => {
    if (resp.data.success) {
      tableData.value.length = 0 // 先清空
      tableData.value.push(...resp.data.data)
    }
  })
  await getThreshold().then(resp => {
    threshold.value = Number(resp.data.data)
  })
}
getData() // 页面加载时查询

// // 定时刷新
const timer = setInterval(getData, 1000 * 3) //60)

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style scoped></style>
